<template>
  <div class="process-container">
    <div class="page-header">
      <h1>运行中实例</h1>
      <p>当前有 {{ runningInstances.length }} 个流程正在运行</p>
    </div>

    <div class="process-list">
      <div v-for="instance in filteredRunningInstances" :key="instance.id" class="process-item">
        <div class="process-icon">
          <i class="fas fa-play-circle"></i>
        </div>
        <div class="process-main">
          <h3>{{ instance.name }}</h3>
          <div class="process-meta">
            <span>发起人: {{ instance.initiator }}</span>
            <span>开始时间: {{ instance.startTime }}</span>
          </div>
          <div class="process-progress">
            <div class="progress-info">
              <span>当前环节: {{ instance.currentActivity }}</span>
              <span>已运行: {{ instance.duration }}</span>
            </div>
            <div class="progress-bar">
              <div :style="{width: '65%'}" class="progress-fill"></div>
            </div>
          </div>
        </div>
        <div class="process-status">
          <span class="status status-running">{{ instance.status }}</span>
          <div class="process-actions">
            <button class="btn-icon">
              <i class="fas fa-pause"></i>
            </button>
            <button class="btn-icon">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 运行中实例数据
import {reactive, computed, ref} from "vue";
import type {ProcessInstance} from "@/views/Test/components/Test7/type/taskType";


// 搜索关键词
const searchKeyword = ref('')


const runningInstances = reactive<ProcessInstance[]>([
  {
    id: 1001,
    name: '项目立项审批流程',
    initiator: '张小明',
    startTime: '2023-07-18 09:30',
    status: '运行中',
    duration: '2天',
    currentActivity: '部门审批'
  },
  {
    id: 1002,
    name: '采购申请流程',
    initiator: '李华',
    startTime: '2023-07-17 14:15',
    status: '运行中',
    duration: '3天',
    currentActivity: '财务审核'
  },
  {
    id: 1003,
    name: '请假申请流程',
    initiator: '王芳',
    startTime: '2023-07-19 08:45',
    status: '运行中',
    duration: '1天',
    currentActivity: '主管审批'
  }
])

const filteredRunningInstances = computed(() => {
  if (!searchKeyword.value) return runningInstances
  return runningInstances.filter(item =>
      item.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      item.initiator.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})


</script>
<style scoped>

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  transition: all 0.2s ease;
  position: relative;
}

.btn-icon:hover {
  background: #F1F5F9;
  color: #475569;
}


@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 页面头部 */
.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 8px;
}

.page-header p {
  color: #64748B;
}


.task-main h3 {
  color: #1E293B;
  margin-bottom: 8px;
  font-weight: 600;
}


.status {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* 流程列表 */
.process-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.process-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.process-item {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.process-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.process-icon {
  width: 48px;
  height: 48px;
  background: #F1F5F9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: #6366F1;
  font-size: 1.2rem;
}

.process-main {
  flex: 1;
}

.process-main h3 {
  color: #1E293B;
  margin-bottom: 8px;
  font-weight: 600;
}

.process-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: #64748B;
}

.process-progress {
  width: 100%;
  max-width: 400px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.8rem;
  color: #94A3B8;
}

.progress-bar {
  height: 6px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #6366F1, #8B5CF6);
  transition: width 0.5s ease;
}

.process-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-left: 20px;
}

.process-actions {
  display: flex;
  gap: 8px;
}


.deployed-processes h2 {
  color: #1E293B;
  margin-bottom: 16px;
  font-weight: 600;
}

</style>